<template>
<div id="big">
  <div style="width: 100%; height: 60px;"><div id="top"><Theme></Theme></div></div>
  <div style="display: flex;justify-content: space-around">
<!--    左边-->
    <div style="width: 20% ;height: 1100px">
    <div id="top-l"><Quantity/></div>
    <div id="center-1" style="margin-top: 20px"><bar :bar-date="barDate"></bar></div>
    <div style="margin-top: 20px"><Line-home :ge-wei="geWei" :bei-ruan="beiRuan" :Days="Days"></Line-home></div>
    </div>
<!--    中间-->
    <div style="width: 50%;height: 1100px">
<!--      <Information :task-li="taskList" :inFor="inFor"></Information>-->
      <information1 :task-li="taskList" :inFor="inFor" :in-for-bin-date="inForBinDate" :pie-date="pieDate"></information1>
    </div>
<!--    右边-->
    <div style="width: 25%;height: 1100px">
      <div id="cal" style="width: 100% ;height: 400px">
<!--        <Attendance :infoLi="infoList"/>-->
        <Attendance1 :infoLi="infoList"/>
      </div>
      <div  style="margin-top:10px;width: 100%;height: 600px;border: 2px solid cyan;box-shadow: 1px 1px 20px cyan;">
        <div style="width: 100%;height: 300px;border: 1px solid cyan">
          <Barvar :bar-date1="barDate1" :bar-date2="barDate2"/>
        </div>
        <div style="width: 100%;height: 300px"><TaskComplete :task-com="taskCom"/></div>
      </div>

    </div>
    </div>

</div>

</template>

<script>
import information1 from "../components/normalHome/information1";
import Attendance1 from "../components/normalHome/Attendance1";
import gundong from "../components/normalHome/gundong";


import Theme from "../components/echarts/Theme";
import bar from "../components/echarts/bar";
import LineHome from "../components/echarts/LineHome";
import pieHome from "../components/echarts/pieHome";
import Tabbar from "../components/common/Tabbar";
import binHome from "../components/echarts/binHome";
import Information from "../components/echarts/Information";
import Task from "../components/normalHome/Task";
import Attendance from "../components/normalHome/Attendance";
import Barvar from "../components/echarts/Barvar";
import TaskComplete from "../components/normalHome/TaskComplete";
import Quantity from "../components/normalHome/Quantity";
import axios from "axios";

import {DAxios} from "../network/echartsHome";


export default {
  name: "echartsHome",
  components:{
    information1,
    Attendance1,
    gundong,

    Theme,
    bar,
    LineHome,
    pieHome,
    Tabbar,
    binHome,
    Information,
    Task,
    Attendance,
    Barvar,
    TaskComplete,
    Quantity,
  },
  data(){
    return{
      text:[],
      //出勤率
      infoList:[],
        // {id:"001",name:"张三",attend:100},
        // {id:"002",name:"李四",attend:88},
        // {id:"003",name: "王五",attend:66},
        // {id:"004",name:"赵四",attend: 44},
        // {id:"001",name:"张三",attend:100},
        // {id:"002",name:"李四",attend:88},
        // {id:"003",name: "王五",attend:66},
        // {id:"004",name:"赵四",attend: 44},
        // {id:"001",name:"张三",attend:100},
        // {id:"002",name:"李四",attend:88},
        // {id:"003",name: "王五",attend:66},
        // {id:"004",name:"赵四",attend: 44},
        // {id:"003",name: "王五",attend:66},
        // {id:"004",name:"赵四",attend: 44},
        // {id:"001",name:"张三",attend:100},
        // {id:"002",name:"李四",attend:88},
        // {id:"003",name: "王五",attend:66},
        // {id:"004",name:"赵四",attend: 44}

      //个人信息任务列表
      taskList:[
    {
      name:"大屏展示前端"
    },
    {
      name:"大屏展示后端"
    },
    {
      name:"登录页面前端"
    },
    {
      name:"登录页面后端"
    },
    {
      name:"指纹认证前端"
    },
    {
      name:"指纹认证后端"
    }
      ],
      //个人信息
      inFor:[
        {id:"****",name:"****",project:"*****",call1:"****************",absence:"****",normal:"****", url:require('../assets/img/inform.png'),
          zc:27, qq:3, wc:78,cd:1,qj:1,kq:1},
        {id:"01",name:"张三",project:"格微内网办公系统",call1:"1008611",absence:5,normal:25,
          url:require('../assets/img/person/person1.jpg'),
          zc:20, qq:10, wc:54,cd:3,qj:2,kq:5},
        {id:"02",name:"李四",project:"移动开发项目组",call1:"13668444",absence:8,normal:6,url:require('../assets/img/person/person2.jpg'),
          zc:15, qq:15, wc:32,cd:8,qj:3,kq:4},
        {id:"03",name:"王五",project:"星星星组",call1:"565656565656",absence:9,normal: 8,url:require('../assets/img/person/person3.jpg'),
          zc:2, qq:28, wc:85,cd:8,qj:2,kq:18},
        {id:"****",name:"****",project:"*****",call1:"****************",absence:"****",normal:"****",url:require('../assets/img/inform.png'),
          zc:27, qq:3, wc:78,cd:1,qj:1,kq:1},
        {id:"01",name:"张三",project:"格微内网办公系统",call1:"1008611",absence:5,normal:25, url:require('../assets/img/person/person1.jpg'),
          zc:20, qq:10, wc:54,cd:3,qj:2,kq:5},
        {id:"02",name:"李四",project:"移动开发项目组",call1:"13668444",absence:8,normal:6,url:require('../assets/img/person/person2.jpg'),
          zc:15, qq:15, wc:32,cd:8,qj:3,kq:4},
        {id:"03",name:"王五",project:"星星星组",call1:"565656565656",absence:9,normal: 8,url:require('../assets/img/person/person3.jpg'),
          zc:2, qq:28, wc:85,cd:8,qj:2,kq:18},
        {id:"****",name:"****",project:"*****",call1:"****************",absence:"****",normal:"****",url:require('../assets/img/inform.png'),
          zc:27, qq:3, wc:78,cd:1,qj:1,kq:1},
        {id:"01",name:"张三",project:"格微内网办公系统",call1:"1008611",absence:5,normal:25, url:require('../assets/img/person/person1.jpg'),
          zc:20, qq:10, wc:54,cd:3,qj:2,kq:5},
        {id:"02",name:"李四",project:"移动开发项目组",call1:"13668444",absence:8,normal:6,url:require('../assets/img/person/person2.jpg'),
          zc:15, qq:15, wc:32,cd:8,qj:3,kq:4},
        {id:"03",name:"王五",project:"星星星组",call1:"565656565656",absence:9,normal: 8,url:require('../assets/img/person/person3.jpg'),
          zc:2, qq:28, wc:85,cd:8,qj:2,kq:18}
      ],

      //个人考勤和个人任务完成度
      inForBinDate:{
        zc:27,
        qq:3,
        wc:78,
        wwc:22,
      },
      //个人每月打卡情况
      pieDate:{
        a:16,
        b:6,
        c:4,
        d:4
      },

      //任务月完成率
      taskCom:[
        {task:'任务一',tComplete:'80'},
        {task:'任务二', tComplete:'37'},
        {task:'任务三', tComplete:'60'},
        {task:'任务四', tComplete:'70'},
        {task:'任务五', tComplete:'30'},
        {task:'任务六', tComplete:'60'},
        {task:'任务七', tComplete:'50'}
      ],
      //请假明细
      barDate:[16,6,4,4,0],
      //平均工作时长
      Days:"20",
      geWei:[5.1,6.1,8.1,9.1,2.1,0,0,3.6,6.1,7.1,8,8,8,8,8,8.5,9,0,0,8,2.3],
      beiRuan:[2.5,2.5,2.5,3,3,3.5,4.5,3.7,4.6,3.6,5.6,5.4,8,3.5,4.5,5.5,2.5,2.8,2.8,2.9,6],
      //任务完成度
      barDate2:['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七'],
      barDate1:[80,70,90,40,30,50,1]
    }
  },
  created() {
  this.DAxios()
    },
  computed:{
    addDate1(){
      this.wwc =100-this.wc
    }
  },
  methods:{
    DAxios(){
      DAxios().then(res=>{
        this.infoList = res.data
           console.log(res)
        }
      ).catch(resp=>{
          console.log(resp)
         })
    }

  }
}
</script>

<style scoped>
@import "../assets/css/AppCss.css";
#top-l{
width: 100%;
  height:250px ;
  border: 2px solid cyan;
  box-shadow: 1px 1px 20px cyan;
}
#center-1{
  /*width: 20%;*/
  /*height: 300px;*/
  /*border: 2px solid cyan;*/
  /*box-shadow: 5px 5px 10px cyan;*/
}
#cal{
  border: 2px solid cyan;
  box-shadow: 1px 1px 20px cyan;
}
</style>
